.homePage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  :global {
    .card {
      background: var(--color-surface);
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      width: 350px;
      padding: 30px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      margin-right: 20px;

      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        background: var(--color-surface-hover);
      }

      .card-icon {
        font-size: 3.5rem;
        margin-bottom: 20px;
      }

      h2 {
        font-size: 1.8rem;
        margin-bottom: 15px;
      }

      p {
        margin-bottom: 25px;
      }

      .btn {
        display: inline-block;
        padding: 12px 30px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        transition: background 0.3s ease;
        border: none;
      }
    }
  }
}